<template>
	<section>
		<el-row class="app-container" v-show="!simple">
			<!--<el-input v-model="filters.key"  style="width:20%;"  placeholder="模糊查询"></el-input> -->
			<!-- <el-button type="primary"   v-on:click="searchGoodsSpecifications">查询</el-button> -->
			<!-- <el-select v-if="userInfo.locationId!='0'" v-model="filters.locationId" value-key="locationId" filterable placeholder="请选择门店"  @change="changeShopLocation" style="width: 60%;">
			    <el-option
			      v-for="item in myLocations"
			      :key="item.locationId"
			      :label="item.locationName"
			      :value="item.locationId"
			      >
			    </el-option>
			</el-select> -->
		<!-- 	<el-select v-model="filters.locationId" value-key="locationId" filterable placeholder="请选择位置" clear="clearShopLocation"
			 @change="changeShopLocation" v-if="isShop">
				<el-option v-for="item in customerMyLocations" :key="item.locationId" :label="item.locationName" :value="item.locationId">
				</el-option>
			</el-select> -->
			<!-- <el-select v-model="filters.locationId" value-key="locationId" clear="clearShopLocation" disabled v-else>
				<el-option v-for="item in customerMyLocations" :key="item.locationId" :label="item.locationName" :value="item.locationId">
				</el-option>
			</el-select> -->
			<el-button type="primary" @click="showAdd">+位置</el-button>
			<!-- <el-pagination  layout="total, sizes, prev,  next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page.sync="pageInfo.pageNum" :page-size="pageInfo.pageSize"  :total="pageInfo.total" style="float:right;"></el-pagination> -->
		</el-row>
		<el-row class="app-container" >
			<!--列表 Position 广告位置-->
			<el-table :data="positions" @sort-change="sortChange" highlight-current-row v-loading="listLoading" border
			  @row-click="rowClick" style="width: 100%;">
				<el-table-column prop="name" label="位置名称" min-width="150" show-overflow-tooltip></el-table-column>
				<el-table-column prop="posCode" label="位置编码" min-width="150" show-overflow-tooltip v-if="!simple"></el-table-column>
				<el-table-column label="操作" min-width="150" fixed="right" v-if="!simple">
					<template slot-scope="scope">
						<el-button @click="showEdit( scope.row,scope.$index)" @submit="afterEditSubmit">改</el-button>
						<el-button type="danger" @click="handleDel(scope.row,scope.$index)">删</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination layout="total, sizes, prev,  next" @current-change="handleCurrentChange" @size-change="handleSizeChange"
			 :page-sizes="[10,20, 50, 100, 500]" :current-page.sync="pageInfo.pageNum" :page-size="pageInfo.pageSize" :total="pageInfo.total"
			 style="float:right;"></el-pagination>
			<!--编辑 Position 广告位置界面-->
			<el-dialog title="编辑" :visible.sync="editFormVisible" append-to-body width="50%" :close-on-click-modal="false">
				<position-edit :position="editForm" :visible="editFormVisible" @cancel="editFormVisible=false" @submit="afterEditSubmit"></position-edit>
			</el-dialog>

			<!--新增 Position 广告位置界面-->
			<el-dialog title="新增" :visible.sync="addFormVisible" append-to-body width="50%" :close-on-click-modal="false">
				<!-- <position-add :position="addForm" :visible="addFormVisible" @cancel="addFormVisible=false" @submit="afterAddSubmit"></position-add> -->
				<position-add  :visible="addFormVisible" @cancel="addFormVisible=false" @submit="afterAddSubmit"></position-add>
			</el-dialog>
		</el-row>
	</section>
</template>

<script>
	import util from '@/common/js/util'; //全局公共库
	import {
		listPosition,
		delPosition,
		batchDelPosition
	} from '@/api/mdp/arc/ad/position';
	import PositionAdd from './PositionAdd'; //新增界面
	import PositionEdit from './PositionEdit'; //修改界面
	import Sticky from '@/components/Sticky' // 粘性header组件
	import {
		mapGetters
	} from 'vuex';

	export default {
		props:['simple'],
		data() {
			return {
				isShop: false,
				customerMyLocations: [],
				filters: {
					key: '',
					locationId: '',
					shopId: ''
				},
				positions: [], //查询结果
				pageInfo: { //分页数据
					total: 0, //服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
					pageSize: 10, //每页数据
					pageNum: 1, //当前页码、从1开始计算
					orderFields: ['pos_type'], //排序列 如 ['sex','student_id']，必须为数据库字段
					orderDirs: ['asc'] //升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
				},
				listLoading: false, //查询中...
				sels: [], //列表选中数据
				options: {}, //下拉选择框的所有静态数据 options.sex,options.project

				addFormVisible: false, //新增position界面是否显示
				//新增position界面初始化数据
				addForm: {
					id: '',
					name: '',
					width: '0',
					height: '0',
					descs: '',
					locationId:'',
          shopId:'',
          posType:'',
          posCode:'',
          shareLvl:''
        },

				editFormVisible: false, //编辑界面是否显示
				//编辑position界面初始化数据
				editForm: {
					id: '',
					name: '',
					width: '',
					height: '',
					descs: '',
          locationId:'',
          shopId:'',
          posType:'',
          posCode:'',
          shareLvl:''
				},
				/**begin 自定义属性请在下面加 请加备注**/
				//只有一个门店
				/**end 自定义属性请在上面加 请加备注**/
			}
		}, //end data
		methods: {
			//获取代码对应的名称 用于数据反显 如 getCodeName(options.sex,'1');
			getCodeName(options, codeValue) {
				if (!options) return codeValue;
				let code = options.filter(i => i.codeValue == codeValue);
				if (code.length > 0) {
					return code[0].codeName
				} else {
					return codeValue
				}
			},
			handleSizeChange(pageSize) {
				this.pageInfo.pageSize = pageSize;
				this.pageInfo.count = true;

				this.getPositions();
			},
			handleCurrentChange(pageNum) {
				this.pageInfo.pageNum = pageNum;
				this.getPositions();
			},
			// 表格排序 obj.order=ascending/descending,需转化为 asc/desc ; obj.prop=表格中的排序字段,字段驼峰命名
			sortChange(obj) {
				var dir = 'asc';
				if (obj.order == 'ascending') {
					dir = 'asc'
				} else {
					dir = 'desc';
				}
				if (obj.prop == 'xxx') {
					this.pageInfo.orderFields = ['xxx'];
					this.pageInfo.orderDirs = [dir];
				}
				this.getPositions();
			},
			searchPositions() {

				this.pageInfo.count = true;
				this.getPositions();
			},
			//获取列表 Position 广告位置
			getPositions() {
				let params = {
					pageSize: this.pageInfo.pageSize,
					pageNum: this.pageInfo.pageNum,
					total: this.pageInfo.total,
					count: this.pageInfo.count
				};
				if (this.pageInfo.orderFields != null && this.pageInfo.orderFields.length > 0) {
					let orderBys = [];
					for (var i = 0; i < this.pageInfo.orderFields.length; i++) {
						orderBys.push(this.pageInfo.orderFields[i] + " " + this.pageInfo.orderDirs[i])
					}
					params.orderBy = orderBys.join(",")
				}
				/* if (this.filters.locationId == '' || this.filters.locationId == null || this.filters.shopId == '' || this.filters.shopId ==
					null) {
					this.$message.error("店铺编号不能为空")
					return
				} */
				/* params.locationId = this.filters.locationId */
				/* params.shopId = this.filters.shopId */
				this.listLoading = true;
				listPosition(params).then((res) => {//只需要根据shopId进行查询就可以了
					var tips = res.data.tips;
					if (tips.isOk) {
						this.pageInfo.total = res.data.total;
						this.pageInfo.count = false;
						this.positions = res.data.data;
					} else {
						this.$message({
							message: tips.msg,
							type: 'error'
						});
					}
					this.listLoading = false;
				}).catch(() => {
					this.listLoading = false;

				});
			},

			//显示编辑界面 Position 广告位置
			showEdit: function(row, index) {
				this.editFormVisible = true;
				this.editForm = Object.assign({}, row);
			},
			//显示新增界面 Position 广告位置
			showAdd: function() {
				/* if (this.filters.locationId == '' || this.filters.locationId == undefined) {
					this.$message({
						message: '请选择门店',
						type: 'info'
					});
				} else {
					this.addFormVisible = true;
					this.addForm = Object.assign({}, this.addForm);
				} */
				this.addFormVisible = true;
				/* this.addForm = Object.assign({}, this.addForm); */
			},
			afterAddSubmit() {
				this.addFormVisible = false;
				this.pageInfo.count = true;
				this.getPositions();
			},
			afterEditSubmit() {
				this.getPositions();
				this.editFormVisible = false;
			},
			//选择行position
			selsChange: function(sels) {
				this.sels = sels;
			},
			//删除position
			handleDel: function(row, index) {
				this.$confirm('确认删除该记录吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					let params = {
						id: row.id
					};
					delPosition(params).then((res) => {
						this.listLoading = false;
						var tips = res.data.tips;
						if (tips.isOk) {
							this.pageInfo.count = true;
							this.getPositions();
						}
						this.$message({
							message: tips.msg,
							type: tips.isOk ? 'success' : 'error'
						});

					});
				}).catch(() => {
					this.listLoading = false;

				});
			},
			//批量删除position
			batchDel: function() {
				var ids = this.sels.map(item => item.id);
				this.$confirm('确认删除选中记录吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.listLoading = true;
					batchDelPosition(ids).then((res) => {
						this.listLoading = false;
						var tips = res.data.tips;
						if (tips.isOk) {
							this.pageInfo.count = true;
							this.getPositions();
						}
						this.$message({
							message: tips.msg,
							type: tips.isOk ? 'success' : 'error'
						});
					});
				}).catch(() => {
					this.listLoading = false;

				});
			},
			rowClick: function(row, event, column) {
				this.$emit('row-click', row, event, column); //  @row-click="rowClick"
			},
			/**begin 自定义函数请在下面加**/
			oneLocationManage() {

				this.filters.locationId = this.userInfo.locationId;
				this.changeShopLocation(this.filters.locationId); //查
			},
			//改变选中门店
			changeShopLocation(locationId) {
				this.customerMyLocations.some(i => {
					if (i.locationId == locationId) {
						this.addForm.locationId = i.locationId;
						this.addForm.locationName = i.locationName;
						this.addForm.shopId = this.userInfo.shopId;
						this.filters.locationId = i.locationId;
						this.filters.shopId = this.userInfo.shopId;
						this.getPositions();//调用方法
						this.$emit("location-change", i.locationId)
						return true;
					}
				});
			},
			getAllLocationByShopIdMethod() {
				let params = {};
				params.shopId = this.userInfo.shopId;
				getAllLocationByShopIdApi(params).then((res) => {
					var tips = res.data.tips; //获取饭回来的数据
					if (tips.isOk) {
						for (let i = 0; i < res.data.data.length; i++) {
							let p = {
								"locationId": res.data.data[i].locationid,
								"locationName": res.data.data[i].locationname,
							}
							this.customerMyLocations.push(p);
						}


					} else {
						this.$message({
							message: tips.msg,
							type: 'error'
						});
					}
				});
			}
			/**end 自定义函数请在上面加**/

		}, //end methods
		components: {
			'position-add': PositionAdd,
			'position-edit': PositionEdit,
			'sticky': Sticky
			//在下面添加其它组件
		},
		computed: {
			...mapGetters([
				'roles', 'userInfo', 'myShops', 'myLocations'
			])
		},
		mounted() {
			if (this.userInfo.locationId == '0') { //如果不是零
				this.isShop = true;
				this.filters.shopId = this.userInfo.shopId; //设置过滤器的商户编号值
			} else {
				this.customerMyLocations.push(this.userInfo);
				this.addForm.shopLocationId = this.userInfo.locationId; //设置某个对象
				this.addForm.locationName = this.userInfo.locationName; //设置上面对象的  售卖门店名称
				this.addForm.shopId = this.userInfo.shopId; //设置商户编号
				// this.filters.locationId = this.userInfo.locationId; //设置过滤器的门店id值
				this.filters.shopId = this.userInfo.shopId; //设置过滤器的商户编号值
				// this.changeShopLocation(this.userInfo.locationId);
			}
			this.filters.locationId = this.userInfo.locationId; //设置过滤器的门店id值
			//this.changeShopLocation(this.userInfo.locationId);
			this.getPositions();

		}
	}
</script>

<style scoped>

</style>
